import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:family_app/src/features/gallery/models/album_model.dart';
import 'package:family_app/src/theme/app_theme.dart';

/// u76f8u518cu7f51u683cu9879
class AlbumGridItem extends StatelessWidget {
  final AlbumModel album;
  final VoidCallback onTap;
  final VoidCallback onEdit;
  final VoidCallback onDelete;

  const AlbumGridItem({
    Key? key,
    required this.album,
    required this.onTap,
    required this.onEdit,
    required this.onDelete,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Card(
        elevation: 2,
        shape:
            RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.r)),
        clipBehavior: Clip.antiAlias,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Expanded(
              child: _buildCoverImage(),
            ),
            Padding(
              padding: EdgeInsets.all(12.r),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Expanded(
                        child: Text(
                          album.name,
                          style: TextStyle(
                            fontSize: 16.sp,
                            fontWeight: FontWeight.bold,
                          ),
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                      _buildPopupMenu(),
                    ],
                  ),
                  SizedBox(height: 4.h),
                  Text(
                    '${album.photoCount} 张照片',
                    style: TextStyle(
                      fontSize: 12.sp,
                      color: AppTheme.textSecondaryColor,
                    ),
                  ),
                  if (album.description != null &&
                      album.description!.isNotEmpty) ...[
                    SizedBox(height: 4.h),
                    Text(
                      album.description!,
                      style: TextStyle(
                        fontSize: 12.sp,
                        color: AppTheme.textSecondaryColor,
                      ),
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ],
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  /// u6784u5efau76f8u518cu5c01u9762u56feu7247
  Widget _buildCoverImage() {
    if (album.coverUrl != null && album.coverUrl!.isNotEmpty) {
      if (album.coverUrl!.startsWith('http')) {
        // u7f51u7edcu56feu7247
        return Image.network(
          album.coverUrl!,
          fit: BoxFit.cover,
          errorBuilder: (context, error, stackTrace) => _buildPlaceholder(),
        );
      } else {
        // u672cu5730u56feu7247
        return Image.file(
          File(album.coverUrl!),
          fit: BoxFit.cover,
          errorBuilder: (context, error, stackTrace) => _buildPlaceholder(),
        );
      }
    } else {
      return _buildPlaceholder();
    }
  }

  /// u6784u5efau5360u4f4du56fe
  Widget _buildPlaceholder() {
    return Container(
      color: Colors.grey[200],
      child: Center(
        child: Icon(
          Icons.photo_album,
          size: 48.r,
          color: Colors.grey[400],
        ),
      ),
    );
  }

  /// u6784u5efau5f39u51fau83dcu5355
  Widget _buildPopupMenu() {
    return PopupMenuButton<String>(
      icon: Icon(Icons.more_vert, size: 20.r),
      padding: EdgeInsets.zero,
      onSelected: (value) {
        if (value == 'edit') {
          onEdit();
        } else if (value == 'delete') {
          onDelete();
        }
      },
      itemBuilder: (context) => [
        const PopupMenuItem<String>(
          value: 'edit',
          child: Row(
            children: [
              Icon(Icons.edit, color: AppTheme.primaryColor),
              SizedBox(width: 8),
              Text('编辑'),
            ],
          ),
        ),
        const PopupMenuItem<String>(
          value: 'delete',
          child: Row(
            children: [
              Icon(Icons.delete, color: Colors.red),
              SizedBox(width: 8),
              Text('删除相册', style: TextStyle(color: Colors.red)),
            ],
          ),
        ),
      ],
    );
  }
}
